<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.keyword"
        placeholder="请输入关键词"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter="handleFilter"
      />
      <el-select
        v-model="listQuery.type"
        placeholder="文档类型"
        clearable
        class="filter-item"
        style="width: 130px"
      >
        <el-option label="会议纪要" value="meeting" />
        <el-option label="工作报告" value="report" />
        <el-option label="项目文档" value="project" />
        <el-option label="其他" value="other" />
      </el-select>
      <el-date-picker
        v-model="listQuery.dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="filter-item"
        style="width: 300px"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="标题" prop="title" align="left" min-width="200">
        <template #default="{row}">
          <el-link type="primary" @click="handleView(row)">{{ row.title }}</el-link>
        </template>
      </el-table-column>
      <el-table-column label="类型" prop="type" align="center" width="100">
        <template #default="{row}">
          <el-tag :type="row.type === 'meeting' ? 'success' : row.type === 'report' ? 'primary' : 'info'">
            {{ row.type === 'meeting' ? '会议纪要' : row.type === 'report' ? '工作报告' : row.type === 'project' ? '项目文档' : '其他' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建人" prop="creator" align="center" width="120" />
      <el-table-column label="创建时间" prop="createTime" align="center" width="180" />
      <el-table-column label="更新时间" prop="updateTime" align="center" width="180" />
      <el-table-column label="操作" align="center" width="150">
        <template #default="{row}">
          <el-button
            size="small"
            type="primary"
            @click="handleDownload(row)"
          >
            下载
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="listQuery.page"
      v-model:limit="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const listLoading = ref(false)
const list = ref([])
const total = ref(0)

const listQuery = ref({
  page: 1,
  limit: 20,
  keyword: '',
  type: '',
  dateRange: []
})

const getList = async () => {
  listLoading.value = true
  try {
    // TODO: 调用API获取文档列表
    listLoading.value = false
  } catch (error) {
    console.error('获取文档列表失败:', error)
    listLoading.value = false
  }
}

const handleFilter = () => {
  listQuery.value.page = 1
  getList()
}

const handleView = (row) => {
  // TODO: 实现文档预览功能
  console.log('查看文档:', row)
}

const handleDownload = (row) => {
  // TODO: 实现文档下载功能
  console.log('下载文档:', row)
}

// 初始化加载数据
getList()
</script>

<style lang="scss" scoped>
.filter-container {
  padding-bottom: 10px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
    margin-right: 10px;
  }
}
</style>